<template>
  <div
    class="product-card text-[#222]"
    @click="viewProduct(product)"
    :style="{ width: width + 'px' }">
    <div
      class="product-image relative"
      :style="{
        height: (width / product.thumbnail.width) * product.thumbnail.height + 'px',
      }">
      <img
        :src="product.thumbnail?.url"
        :alt="product.name"
        loading="lazy"
        :class="{ loaded: !isLoading }"
        @load="handleImageLoad"
        ref="productImage" />
      <!-- nex状态 -->
      <div class="voted_icon" v-if="product.nex_status">
        <svg
          v-if="product.nex_status === 1"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path
            d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
            fill="#F76B1B" />
        </svg>
        <svg
          v-else-if="product.nex_status === 2"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path
            d="M12.5964 15.6488C12.403 15.6632 12.2077 15.6703 12.0106 15.6703C11.7709 15.6703 11.534 15.6593 11.2998 15.6387C10.1411 15.536 9.01839 15.1841 8.00841 14.6071C6.99844 14.0301 6.12511 13.2416 5.44823 12.2956C5.4304 12.2702 5.40641 12.2497 5.37849 12.2361C5.35058 12.2225 5.31966 12.2162 5.28865 12.2178C5.25763 12.2194 5.22753 12.2288 5.20117 12.2453C5.17481 12.2617 5.15305 12.2845 5.13794 12.3117L1.83794 18.2425C1.71236 18.4717 1.69265 18.7467 1.82511 18.9703C1.89406 19.0812 1.99012 19.1728 2.10422 19.2363C2.21833 19.2998 2.34673 19.3332 2.47732 19.3333H6.05232C6.17685 19.3287 6.30035 19.3574 6.41009 19.4165C6.51982 19.4755 6.61181 19.5628 6.67657 19.6693L8.44848 22.6333C8.51332 22.7433 8.60533 22.8348 8.71568 22.899C8.82604 22.9632 8.95103 22.998 9.07869 23C9.35094 22.9849 9.63282 22.808 9.74602 22.56L12.7761 15.9073C12.7891 15.8784 12.7945 15.8466 12.7916 15.815C12.7887 15.7834 12.7777 15.7531 12.7596 15.7271C12.7415 15.701 12.7169 15.6801 12.6883 15.6664C12.6597 15.6527 12.628 15.6466 12.5964 15.6488Z"
            fill="#1DD129" />
          <path
            d="M22.1591 18.2278L18.8806 12.3075C18.8655 12.2807 18.8438 12.2581 18.8176 12.2418C18.7914 12.2255 18.7615 12.2161 18.7307 12.2145C18.6999 12.2128 18.6692 12.219 18.6414 12.2324C18.6136 12.2458 18.5896 12.2659 18.5717 12.291C17.6701 13.5543 16.4242 14.5315 14.9825 15.1061C14.8055 15.1759 14.6623 15.3114 14.5828 15.4842L12.8934 19.2013C12.8716 19.2488 12.8604 19.3004 12.8604 19.3526C12.8604 19.4048 12.8716 19.4564 12.8934 19.5038L14.2808 22.5559C14.3931 22.8038 14.6745 22.9849 14.9463 23C15.074 22.9969 15.1988 22.961 15.3088 22.8958C15.4187 22.8307 15.5101 22.7384 15.5742 22.6278L17.3401 19.6679C17.4726 19.4456 17.7128 19.332 17.9717 19.3333H21.582C21.8877 19.3333 22.1192 19.1738 22.2237 18.875C22.2604 18.7689 22.2737 18.6561 22.2625 18.5443C22.2513 18.4326 22.2161 18.3246 22.1591 18.2278Z"
            fill="#1DD129" />
          <path
            d="M12.0125 9.8C13.2278 9.8 14.2129 8.81503 14.2129 7.6C14.2129 6.38497 13.2278 5.4 12.0125 5.4C10.7972 5.4 9.81202 6.38497 9.81202 7.6C9.81202 8.81503 10.7972 9.8 12.0125 9.8Z"
            fill="#1DD129" />
          <path
            d="M12.0125 1C8.3724 1 5.41248 3.96037 5.41248 7.6C5.41248 11.2396 8.37377 14.2 12.0125 14.2C15.6512 14.2 18.6125 11.2392 18.6125 7.6C18.6125 3.96083 15.6521 1 12.0125 1ZM12.0125 11.2667C11.2873 11.2667 10.5784 11.0516 9.97539 10.6487C9.37241 10.2458 8.90245 9.67317 8.62492 9.00317C8.3474 8.33318 8.27479 7.59593 8.41627 6.88467C8.55775 6.17341 8.90696 5.52007 9.41976 5.00728C9.93255 4.49448 10.5859 4.14527 11.2972 4.00379C12.0084 3.86231 12.7457 3.93492 13.4157 4.21244C14.0857 4.48996 14.6583 4.95993 15.0612 5.56291C15.4641 6.16589 15.6791 6.8748 15.6791 7.6C15.6779 8.57209 15.2912 9.50401 14.6039 10.1914C13.9165 10.8788 12.9846 11.2655 12.0125 11.2667Z"
            fill="#1DD129" />
        </svg>
        <svg
          v-else-if="product.nex_status === 3"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path
            d="M20.5954 8.13393C20.4671 8.00057 20.3144 7.89482 20.1462 7.82278C19.9779 7.75075 19.7975 7.71387 19.6154 7.71429H16.8461V7C16.8461 5.67392 16.3356 4.40215 15.4267 3.46447C14.5179 2.52678 13.2853 2 12 2C10.7147 2 9.48208 2.52678 8.57325 3.46447C7.66442 4.40215 7.15384 5.67392 7.15384 7V7.71429H4.38461C4.01739 7.71429 3.66521 7.8648 3.40554 8.13271C3.14588 8.40061 3 8.76398 3 9.14286V18.7857C3 20.5268 4.42788 22 6.11538 22H17.8846C18.7009 22.0003 19.4848 21.671 20.0688 21.0826C20.3627 20.7933 20.5968 20.4456 20.7568 20.0604C20.9168 19.6752 20.9996 19.2606 21 18.8415V9.14286C21.0006 8.95544 20.9651 8.76977 20.8956 8.59659C20.8262 8.42341 20.7242 8.26615 20.5954 8.13393ZM8.53846 7C8.53846 6.0528 8.90316 5.14439 9.55232 4.47462C10.2015 3.80485 11.0819 3.42857 12 3.42857C12.9181 3.42857 13.7985 3.80485 14.4477 4.47462C15.0968 5.14439 15.4615 6.0528 15.4615 7V7.71429H8.53846V7ZM16.8461 11.2857C16.8461 12.6118 16.3356 13.8836 15.4267 14.8212C14.5179 15.7589 13.2853 16.2857 12 16.2857C10.7147 16.2857 9.48208 15.7589 8.57325 14.8212C7.66442 13.8836 7.15384 12.6118 7.15384 11.2857V10.5714C7.15384 10.382 7.22678 10.2003 7.35662 10.0664C7.48645 9.9324 7.66254 9.85714 7.84615 9.85714C8.02976 9.85714 8.20585 9.9324 8.33569 10.0664C8.46552 10.2003 8.53846 10.382 8.53846 10.5714V11.2857C8.53846 12.2329 8.90316 13.1413 9.55232 13.8111C10.2015 14.4809 11.0819 14.8571 12 14.8571C12.9181 14.8571 13.7985 14.4809 14.4477 13.8111C15.0968 13.1413 15.4615 12.2329 15.4615 11.2857V10.5714C15.4615 10.382 15.5345 10.2003 15.6643 10.0664C15.7941 9.9324 15.9702 9.85714 16.1538 9.85714C16.3375 9.85714 16.5135 9.9324 16.6434 10.0664C16.7732 10.2003 16.8461 10.382 16.8461 10.5714V11.2857Z"
            fill="#222222" />
        </svg>
      </div>
      <!-- 奖励标签 -->
      <div class="award-badge" v-if="showAwardBadge">
        <GiftIcon class="mr-[4px]" v-if="product.prize?.prize_type === 2" />
        <AwardIcon class="mr-[4px]" v-else />
        <span class="font-[500]">
          {{ product.prize?.prize_type === 2 ? product.prize?.name : product.prize?.amount }}
        </span>
      </div>

      <!-- 加载占位符 -->
      <div v-if="isLoading" class="loading-placeholder"></div>
    </div>
    <div class="product-info">
      <h3 class="product-name">{{ product.title }}</h3>
      <div class="product-description">
        <div
          class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.2]"
          :class="{ 'max-w-[60%]': product.tags.length > 0 }">
          {{ product.caption }}
        </div>
        <span
          v-if="product.tags.length > 0"
          v-slide-underline
          class="line max-w-[100%] text-[#222] ml-2 overflow-hidden text-ellipsis whitespace-nowrap"
          v-for="tag in product.tags"
          @click.stop="">
          # {{ tag.name }}
        </span>
      </div>
      <div class="mt-[12px] flex justify-between text-[14px]">
        <div
          class="left-meta flex items-center cursor-pointer"
          @click.stop="viewUser(product.user)">
          <img
            :src="product?.user?.avatar"
            class="w-[24px] h-[24px] rounded-full"
            :alt="product.user?.name" />
          <div
            class="font-[14px] font-[500] text-[#222] ml-[4px] max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap">
            {{ product.user?.name }}
          </div>
        </div>
        <div class="right-meta flex items-center">
          <!-- 投票 -->
          <div class="flex items-center gap-[4px] mr-[12px]" @click.stop="handleVote(product)">
            <VoteIcon :color="product.is_vote ? '#F76B1B' : '#CBCBCB'" />
            <span class="font-[500]">{{ formatNumber(product.counter?.vote_count) }}</span>
          </div>
          <!-- 评论 -->
          <div class="flex items-center gap-[4px]">
            <CommentIcon />
            <span class="font-[500]">{{ formatNumber(product.counter?.comment_count) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { FeedItem } from '@/api/feeds';
  import VoteIcon from './icons/VoteIcon.vue';
  import LikeIcon from './icons/LikeIcon.vue';
  import CommentIcon from './icons/CommentIcon.vue';
  import AwardIcon from './icons/AwardIcon.vue'; // 导入AwardIcon
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/user';
  import { CommentAPI } from '@/api/comment';
  import { useLoginModal } from '@/composables/useLoginModal';
  import GiftIcon from './icons/GiftIcon.vue';
  import { FeedVO, VoteRequest } from '@/types/activity';
  import { ActivityAPI } from '@/api/activity';
  import { useDialogStore } from '@/store/dialog';
  import { ElMessage } from 'element-plus';

  interface Props {
    product: FeedVO;
    showAwardBadge?: boolean;
    width: number;
  }

  withDefaults(defineProps<Props>(), {
    product: () => ({} as FeedVO),
    showAwardBadge: false,
  });

  const router = useRouter();
  const userStore = useUserStore();
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const userInfo = computed(() => userStore.user);

  const formatNumber = (num: number) => {
    if (!num) return '0';
    if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'k';
    }
    return num.toString();
  };

  // 查看用户
  const viewUser = (user: any) => {
    router.push({ path: '/profile', query: { uid: user?.uid } });
  };

  // 查看作品详情
  const viewProduct = (product: FeedVO) => {
    // if (!isLoggedIn.value || !userInfo.value) {
    //   const { showModal } = useLoginModal();
    //   showModal();
    //   return;
    // }
    router.push({ path: '/detail', query: { feed_id: product?.feed_id } });
  };

  // 投票逻辑
  const votingIds = ref<Set<string>>(new Set());
  const dialogStore = useDialogStore();
  const handleVote = async (product: FeedItem) => {
    const feedId = product.feed_id?.toString() || '';
    const aid = router.currentRoute.value.query.aid as string;
    if (!feedId || votingIds.value.has(feedId)) {
      return;
    }
    votingIds.value.add(feedId);
    try {
      const voteParams: VoteRequest = {
        aid: aid,
        feed_id: feedId,
      };

      if (product.is_vote === 0) {
        // 投票
        await ActivityAPI.vote(voteParams);
        // 乐观更新状态
        product.is_vote = 1;
        product.counter.vote_count += 1;

        dialogStore.toggleVoteDialog(true);
      }
    } catch (error: any) {
      console.error('Failed to vote:', error);
      const { code } = error.response.data || {};
      if (code === 100205) {
        ElMessage.info('The contest has ended.');
      }
    } finally {
      votingIds.value.delete(feedId);
    }
  };

  // 新增：图片加载状态
  const isLoading = ref(true);
  const productImage = ref<HTMLImageElement>();

  // 新增：处理图片加载完成事件
  const handleImageLoad = () => {
    isLoading.value = false;
  };
</script>

<style scoped lang="scss">
  @use '@/styles/mixins' as *;

  .line {
    display: inline-block;
    background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .product-card {
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;

    .product-image {
      width: 100%;
      overflow: hidden;
      border-radius: 8px;
      background: #f5f5f5;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        &:hover {
          transform: scale(1.1);
        }
      }

      // 新增：加载动画关键帧
      @keyframes loading {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
      // 加载占位符样式
      .loading-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
      }

      .voted_icon {
        display: inline-flex;
        padding: 8px 12px;
        align-items: center;
        gap: 16px;
        border-radius: 30px 0 0 30px;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(2px);
        position: absolute;
        right: 0;
        top: 0;
      }
      .award-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        padding: 0px 6px;
        border-radius: 8px;
        font-size: 14px;
      }
    }

    .product-info {
      padding-top: 12px;
    }

    .product-name {
      color: #222;
      font-size: 14px;
      font-weight: 600;
      line-height: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-description {
      color: #7a7a7a;
      font-size: 14px;
      font-weight: 400;
      margin-top: 4px;
      line-height: 100%;
      display: flex;
      align-items: center;
    }
  }
</style>
